<template>

  <a-form-model ref="ruleForm" :model="form" :rules="rules">
    <detail-list size="small" :col="1" class="detail-layout" v-if="type==0||type==1">

      <detail-list-item term="类型">{{form.payType_dictText}}</detail-list-item>
      <detail-list-item term="支付订单号">{{form.payOrderNo}}</detail-list-item>
      <detail-list-item v-if="form.payType==1||form.payType==4||form.payType==5" term="关联订单号">
        <span v-for="(item,index) in orderList" :key="index">
          <a @click="handInfo(item)">{{item.orderNo}}</a>
        </span>
      </detail-list-item>
      <detail-list-item term="订单金额">{{form.payAmount}}</detail-list-item>
      <detail-list-item term="账户类型">{{form.type_dictText}}</detail-list-item>
      <detail-list-item term="持卡人"><a>{{form.accountName}}</a></detail-list-item>
      <detail-list-item term="开户行">{{form.bankAccount}}</detail-list-item>
      <detail-list-item term="银行卡号">{{form.accountNumber}}</detail-list-item>
      <detail-list-item term="支付时间">{{form.createTime}}</detail-list-item>
      <detail-list-item v-if="type==0&&form.status==2" term="处理时间">{{form.createTime}}</detail-list-item>
      <detail-list-item v-if="type==0&&form.status==2" term="打款证明">
        <img :src="form.imgUrl" style="width:80px;" @click="openUrlView(form.imgUrl)" />
      </detail-list-item>
      <detail-list-item v-if="type==0&&form.status==3" term="处理时间">{{form.createTime}}</detail-list-item>
      <detail-list-item v-if="type==0&&form.status==3" term="拒绝原因">
        {{form.refuseReason}}
      </detail-list-item>
    </detail-list>
    <a-row v-if="type==1&&form.status==1">
      <a-col :span="24">
        <a-form-model-item label="打款证明" prop="imgUrl">
          <j-image-upload class="avatar-uploader" :accept="'image/png,image/jpeg'" text="上传" v-model="form.imgUrl"></j-image-upload>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row v-if="type==2&&form.status==1">
      <a-col :span="24">
        <a-form-model-item label="拒绝原因" prop="refuseReason">
          <a-textarea v-model="form.refuseReason" placeholder="拒绝原因" :maxLength="64" :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-model-item>
      </a-col>
    </a-row>

  </a-form-model>

</template>

<script>

import { putAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from "@/components/dict/JDictSelectTag"
import JImageUpload from '@/components/jeecg/JImageUpload'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item

export default {
  name: 'OmsPayOfflineForm',
  components: {
    JFormContainer,
    JDate,
    JDictSelectTag,
    DetailList,
    DetailListItem,
    JImageUpload
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: () => { },
      required: false
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data () {
    return {
      type: 0,
      form: {
        payOrderNo: '',
        uid: '',
        status: 0,
        refuseReason: '',
        createTime: '',
        updateTime: '',
        type: 0,
        accountName: '',
        bankAccount: '',
        accountNumber: '',
        imgUrl: ''
      },
      orderList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      rules: {
        imgUrl: [
          { required: true, message: '请选择上传凭证!' },
        ],
        refuseReason: [
          { required: true, message: '请输入拒绝原因!' },
        ],
      },
      url: {
        add: "/mallBase/omsPayOffline/add",
        edit: "/mallBase/omsPayOffline/edit",
        queryById: "/mallBase/omsPayOffline/queryById"
      }
    }
  },
  computed: {
    formDisabled () {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton () {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created () {

  },
  methods: {
    handInfo (record) {
      this.$router.push({ path: '/order/mng/OmsOrderInfo', query: { id: record.orderNo, type: record.type } })
    },
    openUrlView (text) {
      console.log(0)
      this.$info({
        title: '预览',
        okText: '关闭',
        content: h => <div style="margin-left:-70px;margin-right:-32px;margin-top: -62px;display:flex;"><img src={text} width="100%" /></div>,
        onOk () {
          console.log('OK')
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    },
    add () {
      this.edit({
        id: '',
        payOrderNo: '',
        uid: '',
        status: 0,
        refuseReason: '',
        createTime: '',
        updateTime: '',
        type: 0,
        accountName: '',
        bankAccount: '',
        accountNumber: '',
        imgUrl: ''
      })
    },
    edit (record, type) {
      if (type) {
        this.type = type
      } else {
        this.type = 0
      }
      this.form = Object.assign({}, record)
      this.loadData()
      this.visible = true
    },
    loadData () {
      getAction("/mallBase/omsPayOffline/queryById", {
        id: this.form.id
      }).then((res) => {
        if (res.success) {
          this.orderList = res.result.orderList
        }
        if (res.code === 500) {
          this.$message.warning(res.message)
        }
      })
    },
    submitForm () {
      const that = this
      // 触发表单验证
      let httpurl = ""
      let formData = {}
      if (this.type == 1) {
        if (!this.form.imgUrl) {
          this.$message.error('请先上传打款凭证')
          return
        }
        httpurl = "/mallBase/omsPayOffline/sure"
        formData = {
          id: this.form.id,
          payOrderNo: this.form.payOrderNo,
          imgUrl: this.form.imgUrl
        }
      } else if (this.type == 2) {
        if (!this.form.refuseReason) {
          this.$message.error('请输入拒绝原因')
          return
        }
        httpurl = "/mallBase/omsPayOffline/refuse"
        formData = {
          id: this.form.id,
          refuseReason: this.form.refuseReason
        }
      }
      putAction(httpurl, formData).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    popupCallback (row) {
      this.form = row
    },
  }
}
</script>
